<template>
  <a-modal
    :width="500"
    :title="title"
    placement="right"
    :visible="visible"
    @ok="onFinish"
    @cancel="onClose"
  >
    <div class="model-main-wrap">
      <!-- TODO -->
      <a-form
        ref="formRef"
        :model="formState"
        :rules="formRules"
        layout="vertical"
        autocomplete="off"
        @finish="onFinish"
      >
        <a-form-item label="标签标题" name="title">
          <a-input v-model:value="formState.title" showCount allowClear />
        </a-form-item>
        <a-form-item label="父级标签" name="parentId">
          <a-select
            v-model:value="formState.parentId"
            :options="tagList"
            showSearch
            :showArrow="false"
            :filter-option="false"
            placeholder="不选默认为根级标签"
          >
          </a-select>
        </a-form-item>
        <a-form-item label="标签简介" name="summary">
          <a-textarea v-model:value="formState.summary" allowClear auto-size />
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<script>
import { ref, computed } from "vue"
import store from "@/store"
import { insert, detail } from "@/api/tag"
import { CODEENUM } from "@/config";
export default {
  props: ["modelValue", "title"],
  emits: ["update:modelValue"],
  setup(prop, context) {
    const title = ref(prop.title)
    const visible = ref(false)

    const tagList = computed(() =>
      store.getters.tagList.map((e) => {
        return { label: e.title, value: e.id }
      })
    )

    const formState = ref({
      id: "",
      parentId: null,
      title: "",
      summary: "",
      icon: "",
      color: "",
      status: "1",
      level: "1",
      remark: "",
    })
    const formRules = {
      title: [{ required: true, message: "请输入标签标题！" }],
      summary: [{ required: true, message: "请输入标签简介！" }],
      status: [{ required: true, message: "请选择标签状态！" }],
    }

    const showDrawer = () => {
      visible.value = true
    }
    const onClose = () => {
      visible.value = false
    }

    const onFinish = async (values) => {
      const params = JSON.parse(JSON.stringify(values))
      const { data, code } = await insert(params)
      if (code !== CODEENUM.OP_SUCCESS) return
    }
    return {
      // eslint-disable-next-line vue/no-dupe-keys
      title,
      visible,
      tagList,
      formState,
      formRules,
      showDrawer,
      onClose,
      onFinish,
    }
  },
}
</script>

<style scoped lang="less">
.model-main-wrap {
}
.model-footer {
  display: flex;
  flex-direction: row;
  // justify-content: flex-end;
  margin-top: 20px;
}
</style>
